<template>
  <!-- 页脚排行榜 -->
  <div
    v-if="main.showFootTable"
    class="w-fill h-auto bg-[#1a2c38] min-375 text-white"
  >
    <div class="w-full max-w-[1200px] m-auto p-4 px-0 items-center">
      <!-- 面包屑切换 -->
      <div class="mt-4 mb-4">
        <div
          class="w-full sm:w-min flex space-x-4 p-2 overflow-y-hidden overflow-x-auto bg-[#0f212e] rounded-full"
        >
          <!-- <div class="nav-item active">{{ "All" }}</div> -->
          <div
            @click="choseTabs(1)"
            class="flex items-center text-sm font-bold"
            :class="active == '1' ? 'active nav-item' : 'nav-item'"
          >
            {{ $t("page.navbar.mybet") }}
          </div>
          <div
            @click="
              choseTabs(2);
              getTableDataList();
            "
            class="flex items-center text-sm font-bold"
            :class="active == '2' ? 'active nav-item' : 'nav-item'"
          >
            {{ $t("page.navbar.AllBets") }}
          </div>
          <div
            @click="
              choseTabs(3);
              getTableDataList();
            "
            class="flex items-center text-sm font-bold"
            :class="active == '3' ? 'active nav-item' : 'nav-item'"
          >
            {{ $t("page.navbar.HighRollers") }}
          </div>
        </div>
      </div>
      <div class="overflow-x-auto">
        <table
          v-if="active == '1'"
          class="w-full text-left bg-[#213743]"
          style="table-layout: fixed"
        >
          <thead class="table-header bg-[#1a2c38] text-[#b1bad3] text-sm">
            <tr>
              <th class="p-4 text-left lg:text-center">
                {{ $t("page.table.game") }}
              </th>
              <th class="p-4 text-center hidden lg:table-cell">
                {{ $t("page.table.Time") }}
              </th>
              <th class="p-4 text-right lg:text-center">
                {{ $t("page.table.betamount") }}
              </th>
              <th class="p-4 text-center hidden lg:table-cell">
                {{ $t("page.table.prize") }}
              </th>
              <th class="p-4 text-center hidden lg:table-cell">
                {{ $t("page.table.earnings") }}
              </th>
            </tr>
          </thead>
          <tbody>
            <tr
              class="table-row bg-[#213743] text-[#b1bad3]"
              v-for="(item, i) in tableData"
              :key="i"
            >
              <td
                class="p-4 text-left lg:text-center text-white font-semibold truncate"
              >
                {{ item.game_name }}
              </td>
              <td class="p-4 text-center hidden lg:table-cell truncate">
                {{ item.bet_at }}
              </td>
              <td
                class="p-4 text-right lg:text-center truncate"
                :class="
                  item.bet_amount >= 0 ? 'text-[#00e701]' : 'text-red-500'
                "
              >
                {{ item.bet_amount }}
              </td>
              <td
                class="p-4 text-center hidden lg:table-cell truncate"
                :class="
                  item.prize > 0
                    ? 'text-[#00e701]'
                    : item.prize < 0
                    ? 'text-red-500'
                    : 'text-[#b1bab5]'
                "
              >
                {{ item.prize }}
              </td>
              <td
                class="p-4 text-center hidden lg:table-cell truncate"
                :class="item.profit >= 0 ? 'text-[#00e701]' : 'text-red-500'"
              >
                {{ item.profit }}
              </td>
            </tr>
          </tbody>
        </table>
        <table
          v-if="active != '1'"
          class="w-full text-left bg-[#213743]"
          style="table-layout: fixed"
        >
          <thead class="table-header bg-[#1a2c38] text-[#b1bad3] text-sm">
            <tr>
              <th class="p-4 text-left lg:text-center">
                {{ $t("page.table.game") }}
              </th>
              <th class="p-4 text-center hidden lg:table-cell">
                {{ $t("page.table.user") }}
              </th>
              <!-- <th class="p-4 text-center">{{ $t("page.table.Time") }}</th> -->
              <th class="p-4 text-right lg:text-center">
                {{ $t("page.table.betamount") }}
              </th>
              <th class="p-4 text-center hidden lg:table-cell">
                {{ $t("page.table.prize") }}
              </th>
              <th class="p-4 text-center hidden lg:table-cell">
                {{ $t("page.table.earnings") }}
              </th>
            </tr>
          </thead>
          <tbody>
            <tr
              class="table-row bg-[#213743] text-[#b1bad3]"
              v-for="(item, i) in tableData3"
              :key="i"
            >
              <td
                class="p-4 flex text-center items-center align-center lg:text-center text-white font-semibold truncate"
              >
                <!-- <div
                  class="icon_svg"
                  :style="'background-image:url(' + item.imgUrl + ')'"
                ></div> -->
                <img
                  :src="item.imgUrl"
                  class="w-[20px]"
                  @error="setDefaultImage(item.imgUrl)"
                  alt=""
                />
                <span class="min-[30px] ml-[4px]">
                  {{ item.game_name }}
                </span>
              </td>
              <td
                class="p-4 text-center text-white font-semibold truncate hidden lg:table-cell"
              >
                {{ item.user_name }}
              </td>
              <!-- <td class="p-4 text-center truncate">{{ item.reckon_at }}</td> -->
              <td class="p-4 text-right lg:text-center truncate text-[#00e701]">
                {{ item.bet_amount }}
              </td>
              <td class="p-4 text-center truncate hidden lg:table-cell">
                {{ item.prize }}
              </td>
              <td
                class="p-4 text-center truncate hidden lg:table-cell"
                :class="
                  item.prize - item.bet_amount > 0
                    ? 'text-[#00e701]'
                    : 'text-red-500'
                "
              >
                {{ item.prize - item.bet_amount }}
              </td>
              <!-- <td class="p-4 text-right truncate">{{ item.profit }}</td> -->
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</template>
<script setup>
import { reactive, ref, onMounted, onBeforeUnmount } from "vue";
import { betList, betRankList } from "../../api/casion";
import { dateTimeZone } from "../../utils/date";
// import { data } from "autoprefixer";
import { mainAct } from "@/store/activeda";
import { useRouter } from "vue-router";
import { eventBus } from "@/utils/eventBus";

const main = mainAct();
const router = useRouter();

const currentPage = ref(1);
const totalList = ref(3);
const tableData = ref([]);
const tableData2 = ref([]);
const tableData3 = ref([]);

const choseTabs = e => {
  active.value = e;

  switch (e) {
    case 1:
      if (!main.isLogin) return;
      getList();
      break;

    default:
      break;
  }
};
const active = ref(3);
const getList = async () => {
  let data = {
    page: currentPage.value,
    page_size: 10
  };
  let res = await betList(data);
  console.log("⬇⬇   ---> 注单列表 <---   ⬇⬇");
  console.log(res);
  if (res.errno == 0 && res.data.list.length) {
    res.data.list.forEach(item => {
      item.bet_at = dateTimeZone(
        item.bet_at,
        "{y}-{m}-{d} {h}:{i}:{s}",
        main.timeZone
      );
      item.game_name = item.game_name.replace(/(\d+%)/, "");
    });
    tableData.value = res.data.list;
    totalList.value = Math.ceil(res.data.total / 10);
  }
};

const getRankList = async () => {
  let data = {
    page: currentPage.value,
    page_size: 10
  };
  let res = await betRankList(data);

  //   console.log("⬇⬇   ---> 假数据列表 <---   ⬇⬇");
  if (res.errno == 0) {
    if (res.data.list && res.data.list.length) {
      if (main.svgData?.length) {
        console.log(main.svgData);

        res.data.list.map(items => {
          let obj = main.svgData.find(row => row.id == items.category_id);
          if (obj != undefined && obj != null) {
            items.imgUrl = main.static_base_url + obj.icon;
          }
        });
      }
      res.data.list.forEach(item => {
        item.game_name = item.game_name.replace(/(\d+%)/, "");
      });
    }
    tableData2.value = res.data.list;
    getTableDataList();
  }
};

const getTableDataList = (count = 10) => {
  let arr = tableData2.value;
  tableData3.value = [];
  if (count >= arr.length) return arr.slice();

  // 创建一个数组副本
  const shuffled = arr.slice();
  let result = [];
  for (let i = 0; i < count; i++) {
    // 生成一个随机索引
    let randomIndex = Math.floor(Math.random() * shuffled.length);
    // 将选中的元素添加到结果数组中
    result.push(shuffled.splice(randomIndex, 1)[0]);
  }
  return (tableData3.value = result);
};

let clearTime = ref();
onMounted(() => {
  getRankList();

  clearTime.value = setInterval(() => {
    getTableDataList();
  }, 5000);

  eventBus.on("tigger", () => {
    console.log("tigger");
    getList();
  });
  if (!main.isLogin) return;
  getList();
});

onBeforeUnmount(() => {
  clearInterval(clearTime.value);
});

const setDefaultImage = url => {
  return url;
};
</script>
<style scoped lang="less">
.btn {
  background-color: #1c2b3a;
  color: #ffffff;
  padding: 0.5rem 1rem;
  border-radius: 0.25rem;
  cursor: pointer;
}

.btn:hover {
  background-color: #22303f;
}

.dropdown {
  background-color: #1c2b3a;
  color: #ffffff;
  padding: 0.5rem;
  border-radius: 0.25rem;
}

:deep(.van-pagination__item) {
  border-radius: 5px;
  background-color: #1a2c38;
  padding: 0;

  .btn {
    border: unset;
    outline: unset;
  }
}

:deep(.van-hairline--surround:after) {
  border: unset;
  outline: unset;
}

.nav-item {
  color: #ffffff;
  padding: 10px 20px;
  cursor: pointer;
  white-space: nowrap;
}

.nav-item:hover {
  background-color: #2f4553;
  border-radius: 20px;
}

.nav-item.active {
  background-color: #2f4553;
  border-radius: 20px;
}
.table-row {
  border-radius: 4px;
}
.table-row:nth-child(even) {
  background-color: #1a2c38 !important;
}

.icon_svg {
  width: 20px;
}
</style>
